<template>
    <div class="common-layout">
        <el-container class="container">
            <!--左侧导航栏-->
            <NavMenu  class="main-navMenu"></NavMenu>
            <el-container class="main-el-container">
                <!--顶部-->
                <el-header>
                    <head-top-index />
                </el-header>
                <!-- 首页-->
                <el-main><router-view /></el-main>
            </el-container>
        </el-container>
    </div>

</template>

<script setup>
import NavMenu from "./Aside/NavMenu.vue";
import HeadTopIndex from "./head/headTopIndex.vue";
import myAxios from "../plugins/myAxios.js";
import {onMounted, provide, ref} from "vue";

//进入首页先获取当前用户信息。
onMounted(()=>{
    getUser();
})

const userRef = ref({
    id:-1,
    userName:'',
    userAvatar:'',
    sex:'',
    userRole:''
})

//使用透传 将用户信息传给子组件
provide('userRef',userRef);


const getUser = async ()=>{
    const res = await myAxios.get('/user/get/login')
    if(res.code === 0 && res.data){
        userRef.value = res.data;
    }else{
        userRef.value.id = -1;
    }
}
</script>

<style scoped lang="less">
@import "../assets/css/common.less";
.main-navMenu{
    position: absolute;
    left: 0;
    background: @EleColor;
}
.container{
    height: 100%;
}

.common-layout{
    position: absolute;
    width: 100%;
    height: 100%;
}

.main-el-container{
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: @ContainerLeft;
    width: @ContainerWidth; //无意中解决一个大css问题。。。。。
    height: 100%; //主显示高度宽度撑满
    .el-header{
        margin: 0;
        padding: 0;
        height: @TopHeight;
        background: @EleColor;
        border-bottom-left-radius: 10px;
    }
    .el-main{
        padding: 0;
        margin: 10px 0 0;
        border-top-left-radius: 5px;
        background: @EleColor;
    }

}
</style>
